<template>
  <div class="work_schedule">
    <span class="block_label_color mad_label font_block"
          :class="stateColor">{{data.workorderProcessStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'WorkSchedule',
  props: {
    data: Object
  },
  computed: {
    // 根据工单进度状态返回相应class
    stateColor() {
      switch (this.data.workorderProcessStatusValue) {
        case 'ToBeAssigned':
          // 待下发
          return 'gd_schedule_assigned'
        case 'ToBeConfirmed':
          // 待确认
          return 'gd_schedule_confirmed'
        case 'ToBeSplitted':
          // 待拆分
          return 'gd_schedule_splitted'
        case 'PartSplitted':
          // 部分拆分
          return 'gd_schedule_part_splitted'
        case 'CompleteSplitted':
          // 拆分完成
          return 'gd_schedule_complete_splitted'
        case 'Finished':
          // 已完成
          return 'gd_schedule_finished'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 工单进度颜色 */
  // 待下发
  @gdScheduleToBeAssigned: #ffef71;
  // 待确认
  @gdScheduleToBeConfirmed: #ffc7c7;
  // 待拆分
  @gdScheduleToBeSplitted: #99e1ff;
  // 部分拆分
  @gdSchedulePartSplitted: #cfd1ff;
  // 拆分完成
  @gdScheduleCompleteSplitted: #a0e7b1 ;
  // 已完成
  @gdScheduleFinished: #cbd2d9;
  .work_schedule{
    .block_label_color{
      /*工单状态*/
      // 待下发
      &.gd_schedule_assigned{
        background-color: @gdScheduleToBeAssigned;
      }
      // 待确认
      &.gd_schedule_confirmed{
        background-color: @gdScheduleToBeConfirmed;
      }
      // 待拆分
      &.gd_schedule_splitted{
        background-color: @gdScheduleToBeSplitted;
      }
      // 部分拆分
      &.gd_schedule_part_splitted{
        background-color: @gdSchedulePartSplitted;
      }
      // 拆分完成
      &.gd_schedule_complete_splitted{
        background-color: @gdScheduleCompleteSplitted;
      }
      // 已完成
      &.gd_schedule_finished{
        background-color: @gdScheduleFinished;
      }
    }
  }
</style>
